<template>
<div class="bh-select">
	<div class="bh-input" @click="clickSelect">
		<input 
			@focus="handleFocus" 
			@blur="handleBlur"
			type="text" 
			ref="reference"
			v-model='selectedLabel'
			readonly="readonly" 
			class="bh-input__inner">
	</div>
	<div class="bh-select-dropdown bh-popper" v-show='visible' :style="styles" ref="popper">
		<div class="bh-scrollbar">
			<div class="bh-select-dropdown__wrap">
				<ul class="bh-scrollbar__view el-select-dropdown__list">
					<slot></slot>
				</ul>
			</div>
		</div>
		<div class="popper__arrow"></div>
	</div>
</div>
</template>

<script>
import Emitter from '../../../../src/mixins/emitter';
export default {
	name: 'bh-select',
	componentName: 'BHSelect',
	mixins: [Emitter],
	provide() {
		return {
			'select': this
		};
    },
	props: {
		type: String,
		multiple: Boolean,
		value: {
			required: true
		},
	},
	data() {
		return {
			options: [],
			selected: this.multiple ? [] : {},
			selectedLabel: '',
			optionsCount: 0,
			visible: false,
			isSilentBlur: false,
			softFocus: false,
			styles: {
				left: '0px',
				top: '0px',
			},
		};
	},
	methods: {
		getOption(value) {
			let label;
			
			this.options.forEach((item) => {
				if(item.value == value) {
					label = item.label;
				}
			});
			let newOption = {
				value: value,
				currentLabel: label
			};

			return newOption;
		},
		//点击option选项
		handleOptionSelect(option, byClick) {
			if(this.multiple) {//多选
				const value = (this.selected || []).slice();
				value.push(option.value);
				console.log('value', value);
				this.$emit('change', value);
				this.$emit('input', value);//虽然不是输入框,但是还是通过这个来改变父级的值
			}else {//单选
				const value = option.value;
				this.$emit('change', value);
				this.$emit('input', value);//虽然不是输入框,但是还是通过这个来改变父级的值
				this.selectedLabel = this.getOption(value).currentLabel;
				this.visible = false;
			}

			this.isSilentBlur = byClick;
			this.handleBlur();
			this.setSoftFocus();
		},
		setSelected(option) {
			console.log(222, option);
		},
		initSelectVal() {
			this.selectedLabel = this.getOption(this.value).currentLabel || this.value;
		},
		setSoftFocus() {
			this.softFocus = true;
			this.$refs.reference.focus();
		},
		handleFocus() {
			console.log('handleFocus:1');
			//this.visible = true;
		},
		blur() {
			console.log('handleBlur:2');
		},
		handleBlur() {
			setTimeout(() => {
				console.log('handleBlur:1');
				if(this.isSilentBlur) {
					this.isSilentBlur = false;
				}else {
					this.$emit('blur', event);
				}
			}, 50);
			this.softFocus = false;
		},
		clickSelect() {
			if(this.visible) {
				this.visible = false;
			}else {
				this.visible = true;
				this.setPosition();
			}	
		},
		//设置options位置
		setPosition() {
			const offset = this.$el.getBoundingClientRect();
			//+滚动位移
			const left = offset.left + document.documentElement.scrollLeft;
			const top = offset.top + document.documentElement.scrollTop;
			console.log('offset', offset);
			this.styles.left = left + 'px';
			this.styles.top = (top + 46) + 'px';
		},
	},
	watch: {
		visible(val) {
			if(!val) {
				console.log('visible', val);
			}else {
				console.log('visible', val);
			}
		}
	},
	created() {
		this.$on('handleOptionClick', this.handleOptionSelect);
		this.$on('setSelected', this.setSelected);
		
		
		this.$nextTick(() => {
			document.body.appendChild(this.$refs.popper)
			this.initSelectVal();
		})
	},
}
</script>
